<template>
  <!-- <div style="width: 100%" ref="tableRef"> -->
  <el-table
    :data="props.tableData"
    border
    v-bind="$attrs"
    style="width: 100%"
    :header-cell-style="headerStyle"
    :cell-style="cellStyle"
  >
    <el-table-column
      v-for="column in props.tableColumns"
      :key="column.prop"
      v-bind="column"
      :min-width="column.minWidth || '200px'"
    >
      <!-- Column Header -->
      <template #header="{ column }">
        <template v-if="column.customHeader">
          <slot :name="column.customHeader" :column="column"></slot>
        </template>
        <template v-else>
          {{ column.label }}
          <template v-if="column.tips">
            <el-tooltip
              popper-class="tooltipAssess"
              class="item"
              effect="dark"
              :content="column.tips"
              placement="top"
            >
              <!-- <SvgIcon class="icon" :size="16" iconClass="hint" /> -->
            </el-tooltip>
          </template>
        </template>
      </template>
      <!-- Column Content -->
      <template #default="{ row, $index }">
        <template v-if="!row._hidden">
          <slot
            :name="column.slotName ? column.slotName : ''"
            :row="row"
            :index="$index"
            :column="column"
          >
            <template v-if="column.type === 'index'">
              {{ $index + 1 }}
            </template>
            <template v-else>
              {{ formatProp(row[column.prop]) }}
            </template>
          </slot>
        </template>
      </template>
    </el-table-column>
    <!-- Operation Column -->
    <template v-if="showOperation">
      <el-table-column v-bind="operationColumn" fixed="right">
        <template #default="{ row, $index }">
          <slot name="operation" :row="row" :index="$index"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <!-- </div> -->
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
  tableColumns: {
    type: Array,
    default: () => [],
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  showOperation: {
    type: Boolean,
    default: true,
  },
  operationAttrs: {
    type: Object,
    default: () => ({
      //width: "100px",
      fixed: "right",
    }),
  },
});
const operationColumn = computed(() => ({
  label: "操作",
  ...props.operationAttrs,
}));
const headerStyle = {
  background: "#F0F7FF",
  border: "none",
  padding: "8.5px 10px",
  fontWeight: "bold",
  fontSize: "12px",
  color: "#333333",
  boxSizing: "border-box",
};

const cellStyle = {
  height: "10px",
  padding: "8px 10px",
  fontWeight: "400",
  fontSize: "12px",
  color: "#333333",
  boxSizing: "border-box",
};
const formatProp = (value) => {
  if (value) return value;
  if (typeof value === "number") {
    return value;
  }
  return "-";
};
</script>
<style lang="less" scoped>
.icon {
  margin-left: 5px;
}
.el-table {
  table-layout: fixed;
  overflow-x: auto;
}
.no-hover {
  &:deep(.el-table__body tr:hover > td),
  &:deep(.el-table__body .el-table__row.hover-row td),
  &:deep(.el-table__body .el-table__row--striped:hover > td) {
    background-color: inherit;
  }
}

&:deep(.is-scrolling-left) {
  overflow-x: scroll;
}

&:deep(.el-table__body tr:hover > td),
&:deep(.el-table__body .el-table__row.hover-row td),
&:deep(.el-table__body .el-table__row--striped:hover > td) {
  background-color: #fffdcc;
}

&:deep(.el-btn) {
  padding: 0 4px;
  cursor: pointer;
  @include text(400, 12px, #2863fa, 20px);
}

&:deep(.el-dropdown-box) {
  width: 140px;
  border: 1px solid #2863fa;
}

&:deep(.el-table__header),
&:deep(.el-table__body),
&:deep(.el-table__footer) {
  width: 100% !important;
  table-layout: fixed !important;
}
</style>

<style>
.tooltipAssess {
  max-width: 800px;
  word-wrap: break-word;
  word-break: break-all;
}
</style>